<template>
  <div class="recommend">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{datas.title}}</span>
        <span style="float: right; cursor: pointer;" @click="_recommendMore(datas.id)">
          <i class="el-icon-more-outline"></i>
        </span>
      </div>
      <div v-for="o in datas.content" :key="o.id" class="recommend-item">
       <em> · </em><span @click="_recommendItem(o.id)" class="elliplse item-content">{{o.name}}</span>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "recommend",
  props: {
    datas: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    _recommendMore (val) {
      this.$emit('recommendMore', val)
    },
    _recommendItem (val) {
      this.$emit('recommendItem', val)
    }
  }
}
</script>

<style scoped lang="less">
.recommend{
  margin-bottom: 10px;
  .recommend-item{
    font-size: 14px;
    margin-bottom: 5px;
    cursor: pointer;
    em{
      width: 15px;
      display:inline-block;
    }
    .item-content{
      width: calc(100% - 15px);
      display:inline-block;
    }
  }
}
</style>
